/* const useStyles = (theme) => ({
    wrapper: {
      // display: "flex",
      // alignItems: "center",
      // justifyContent: "space-between",
      padding: `${rem(6)} ${theme.spacing.xs}`,
      borderRadius: theme.radius.sm,
      border: `${rem(1)} solid ${
        theme.colorScheme === "dark" ? "transparent" : theme.colors.gray[3]
      }`,
      backgroundColor:
        theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.white,
  
      "&:focus-within": {
        borderColor: theme.colors[theme.primaryColor][6],
      },
    },
  
    control: {
      backgroundColor:
        theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.white,
      border: `${rem(1)} solid ${
        theme.colorScheme === "dark" ? "transparent" : theme.colors.gray[3]
      }`,
  
      "&:disabled": {
        borderColor:
          theme.colorScheme === "dark" ? "transparent" : theme.colors.gray[3],
        opacity: 0.8,
        backgroundColor: "transparent",
      },
    },
    label: {
      display: "block",
    },
  
    input: {
      textAlign: "center",
      paddingRight: `${theme.spacing.sm} !important`,
      paddingLeft: `${theme.spacing.sm} !important`,
      height: rem(28),
      flex: 1,
    },
  }); */

.wrapper {
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid #d1d5db;
  background-color: #ffffff;
}

.control {
  background-color: #ffffff;
  border: 1px solid #d1d5db;
}

.control:disabled {
  border-color: #d1d5db;
  opacity: 0.8;
  background-color: transparent;
}

.label {
  display: block;
}

.input {
  text-align: center;
  padding-right: 8px !important;
  padding-left: 8px !important;
  height: 28px;
  flex: 1;
}
